<!-- 供应商---整体sku销量统计页面 -->
<template>
  <div class="container">
    <!-- *************************************搜索区************************************* -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <!-- 时间选择 -->
      <el-form-item>
        <el-switch
          @change="(type) => (queryParams.time = setStatisticsDefautTime(type))"
          v-model="queryParams.dateMark"
          active-color="#13ce66"
          inactive-color="#409eff"
          active-text="日"
          :active-value="'day'"
          inactive-text="月"
          :inactive-value="'month'">
        </el-switch>
      </el-form-item>
      <el-form-item v-show="queryParams.dateMark == 'month'">
        <el-date-picker
          style="width: 400px"
          :clearable="false"
          v-model="queryParams.time"
          type="monthrange"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item v-show="queryParams.dateMark == 'day'">
        <el-date-picker
          style="width: 400px"
          v-model="queryParams.time"
          :clearable="false"
          type="daterange"
          value-format="yyyy-MM-dd" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          <!-- 搜索 -->
          {{ $t('搜索') }}
        </el-button>
      </el-form-item>
    </el-form>
    <div class="chart" id="chart"></div>
  </div>
</template>

<script>
import { getSalesVolumeListBySku } from '@/api/statistics/wholeSaleSupplier'
import * as echarts from 'echarts'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'WholeSaleSupplier',
  data() {
    return {
      // 查询参数
      queryParams: {
        dateMark: 'day',
        time: [],
      },
    }
  },
  async created() {
    this.queryParams.time = this.setStatisticsDefautTime(this.queryParams.dateMark)
    this.getList()
  },

  methods: {
    drawCharts(data) {
      const xData = data.map((i) => {
        const time = i.createTime?.split(' ')[0]
        if (this.queryParams.dateMark == 'day') {
          return time
        } else {
          return time.slice(0, 7)
        }
      })
      const yData = data.map((item) => item.saleNum)
      const option = {
        title: {
          left: 'center',
          top: 20,
          text: '供应商---整体sku销量统计',
        },
        graphic: {
          type: 'text', // 类型：文本
          left: 'center',
          top: 'middle',
          silent: true, // 不响应事件
          invisible: yData.length > 0, // 有数据就隐藏
          style: {
            fill: '#9d9d9d',
            fontWeight: 'bold',
            text: '暂无数据',
            fontFamily: 'Microsoft YaHei',
            fontSize: '25px',
          },
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: xData,
          show: true,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            // show: true,
          },
        },
        grid: {
          // 让图表占满容器
          top: '80px',
          left: '50px',
          right: '10px',
          bottom: '50px',
        },
        series: [
          {
            data: yData,
            type: 'bar',
          },
        ],
      }
      const chartDom = document.getElementById('chart')

      let myChart = echarts.getInstanceByDom(chartDom)

      if (myChart == null) {
        myChart = echarts.init(chartDom)
      }
      myChart.setOption(option)
      //图形宽度随屏幕宽度改变而改变
      window.onresize = myChart.resize
    },

    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      getSalesVolumeListBySku(data).then((res) => {
        this.drawCharts(res.data)
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 40px;
  .chart {
    width: 100%;
    height: calc(100vh - 200px);
    border: 2px solid #bababa;
    border-radius: 8px;
  }
}
</style>
